<template>
  <div class="full-box shadow-box padding-box">
    <OperateCommon :showSearch="true" @search="initData">
      <template #condition>
        <el-date-picker
          v-model="date"
          type="month"
          format="yyyy-MM"
          value-format="yyyy-MM"
          :clearable="false"
        >
        </el-date-picker>
      </template>
    </OperateCommon>
    <div class="table-wrapper">
      <el-table
        ref="table"
        :data="tableData"
        height="100%"
        border
        :show-summary="true"
      >
        <el-table-column label="序号" width="100" type="index" align="center">
        </el-table-column>
        <el-table-column
          prop="responsible_unit_name"
          label="责任单位"
          min-width="200px"
        >
        </el-table-column>
        <el-table-column
          prop="num"
          label="项目数"
          min-width="100px"
          align="center"
          sortable
        >
          <template slot-scope="scope">
            <div class="number" @click="showList(scope, 'all')">
              {{ scope.row.num }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="num1"
          label="暂存"
          min-width="100px"
          align="center"
          sortable
        >
          <template slot-scope="scope">
            <div class="number" @click="showList(scope, 'temp')">
              {{ scope.row.num1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="num2"
          label="退回"
          min-width="100px"
          align="center"
          sortable
        >
          <template slot-scope="scope">
            <div class="number" @click="showList(scope, 'reject')">
              {{ scope.row.num2 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="num3"
          label="待审核"
          min-width="100px"
          align="center"
          sortable
        >
          <template slot-scope="scope">
            <div class="number" @click="showList(scope, 'not-review')">
              {{ scope.row.num3 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="num4"
          label="已审核"
          min-width="100px"
          align="center"
          sortable
        >
          <template slot-scope="scope">
            <div class="number" @click="showList(scope, 'reviewed')">
              {{ scope.row.num4 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="num5"
          label="未上报"
          min-width="100px"
          align="center"
          sortable
        >
          <template slot-scope="scope">
            <div class="number" @click="showList(scope, 'un-report')">
              {{ scope.row.num5 }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="currentTitle"
      :visible.sync="dialog"
      width="80%"
      @close="dialog = false"
    >
      <div>
        <el-table
          border
          stripe
          v-loading="loading"
          ref="table"
          row-key="project_id"
          default-expand-all
          :data="listTable"
          :header-cell-style="{
            background: '#e6e8ec',
            color: '#000',
            height: '60px',
          }"
          :tree-props="{ children: 'children', hasChildren: 'none' }"
        >
          <el-table-column
            label="序号"
            align="center"
            type="index"
            width="50"
          ></el-table-column>
          <el-table-column prop="" label="项目名称" min-width="300">
            <template slot-scope="scope">
              <label v-if="scope.row.nodedeep == 0">
                {{ scope.row.project_name }}
                <span
                  class="is-bind"
                  v-if="scope.row.children && scope.row.children.length > 0"
                >
                  【 打包项目 】
                </span>
              </label>
              <div v-if="scope.row.nodedeep == 1" class="child-project">
                <div class="dot"></div>
                <span>
                  {{ scope.row.project_name }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="建设性质"
            prop="build_kind"
            align="center"
            width="100"
          ></el-table-column>
        </el-table>
      </div>
      <span slot="footer">
        <el-button @click="dialog = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import OperateCommon from "@/components/Common/OperateCommon.vue";
import {
  getProgressAnalyze,
  getProgressAnalyzeList,
} from "@/api/MajorProjectPromotion/Index";
import commonList from "@/mixins/commonList";
export default {
  mixins: [commonList],
  components: { OperateCommon },
  data() {
    return {
      date: new Date().getFullYear() + "-" + (new Date().getMonth() + 1),
      queryParams: {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
      },
      tableData: [],
      currentTitle: "",
      dialog: false,
      listParams: {
        pageNum: 1,
        pageSize: 9999,
        year: "",
        month: "",
        report_status: "",
        responsible_unit_id: "",
      },
      listTable: [],
      loading: false,
    };
  },
  methods: {
    initData() {
      this.queryParams.year = parseInt(this.date.split("-")[0]);
      this.queryParams.month = parseInt(this.date.split("-")[1]);

      getProgressAnalyze(this.queryParams).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data;
          this.$nextTick(() => {
            this.$refs.table.doLayout();
          });
        }
      });
    },
    initList(type) {
      this.listParams.year = this.queryParams.year;
      this.listParams.month = this.queryParams.month;

      this.listParams.report_status = type.report_status;
      this.listParams.responsible_unit_id = type.responsible_unit_id;

      this.loading = true;
      getProgressAnalyzeList(this.listParams).then((res) => {
        if (res.code == 0) {
          this.listTable = res.data;
        }
        setTimeout(() => {
          this.loading = false;
        }, 500);
      });
    },
    showList(scope, type) {
      let report_status = "";
      let responsible_unit_id = scope.row.responsible_unit_id;
      switch (type) {
        case "all":
          this.currentTitle = `${scope.row.responsible_unit_name} | 项目数 | ${scope.row.num}`;
          report_status = "";
          break;
        case "temp":
          this.currentTitle = `${scope.row.responsible_unit_name} | 暂存数 | ${scope.row.num1}`;
          report_status = 0;
          break;
        case "reject":
          this.currentTitle = `${scope.row.responsible_unit_name} | 退回数 | ${scope.row.num2}`;
          report_status = 5;
          break;
        case "not-review":
          this.currentTitle = `${scope.row.responsible_unit_name} | 待审核数 | ${scope.row.num3}`;
          report_status = 10;
          break;
        case "reviewed":
          this.currentTitle = `${scope.row.responsible_unit_name} | 已审核数 | ${scope.row.num4}`;
          report_status = 100;
          break;
        case "un-report":
          this.currentTitle = `${scope.row.responsible_unit_name} | 未上报数 | ${scope.row.num5}`;
          report_status = 1;
          break;
        default:
          report_status = "";
          break;
      }
      this.dialog = true;
      this.initList({
        report_status,
        responsible_unit_id,
      });
    },
  },
  created() {
    this.initData();
  },
};
</script>

<style lang="scss" scoped>
:deep(.el-table__row) {
  color: #000;
  font-weight: 600;
  td {
    &:nth-child(4) {
      background-color: rgb(244, 244, 245);
    }
    &:nth-child(5) {
      background-color: rgb(254, 240, 240);
    }
    &:nth-child(6) {
      background-color: rgb(236, 245, 255);
    }
    &:nth-child(7) {
      background-color: rgb(240, 249, 235);
    }
    &:nth-child(8) {
      background-color: rgb(253, 246, 236);
    }
  }
}

.number {
  display: inline-block;
  width: 22px;
  height: 22px;
  cursor: pointer;
  &:hover {
    border-radius: 50%;
    color: #fff;
    background-color: #808080;
  }
}


.is-bind {
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

.child-project {
  display: inline-block;
  > .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: skyblue;
    margin-right: 10px;
  }
}
</style>
